<template>
  <div>
    <el-row>
      <el-col :span="6"></el-col>
      <el-col :span="12" style="margin-top:30px;padding-top:30px;padding-right:50px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width: 300px;height: 420px;">
        <h2 style="text-align:center;">修改密码</h2>
        <el-form
            label-width="120px"
            class="demo-ruleForm"
            status-icon
        >
          <el-form-item label="请输入旧密码" style="margin-top: 30px">
            <el-input type="password"  v-model="userObj.oldPwd" @blur="checkForm()"/>
            <div style="color: red;font-size: 12px;">{{oldError}}</div>
          </el-form-item>

          <el-form-item label="请输入新密码" style="margin-top: 30px">
            <el-input type="password" v-model="userObj.newPwd"  @blur="checkForm()"/>
            <div style="color: red;font-size: 12px;">{{newError}}</div>
          </el-form-item>

          <el-form-item label="请确认新密码" style="margin-top: 30px">
            <el-input type="password" v-model="userObj.rePwd"  @blur="checkForm()"/>
            <div style="color: red;font-size: 12px;">{{reError}}</div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="updatePwd()">
              <el-icon style="font-size: 20px;padding-right: 10px;"><Avatar /></el-icon>修改密码
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      oldError:"", //旧密码错误信息
      newError:"", //新密码错误信息
      reError:"", //确认密码错误信息
      userObj:{}, //要修改密码的用户对象
      loginUser:{} //登陆用户
    }
  },
  methods:{
    checkForm(){//验证
      console.log(this.userObj.oldPwd +"  "+ this.userObj.newPwd+"  "+this.userObj.rePwd)
      if(this.loginUser.pwd != this.userObj.oldPwd){
        this.oldError = "旧密码错误";
      }
      else{this.oldError = "";}

      if(/^[a-zA-Z0-9]{3,}$/.test(this.userObj.newPwd) == false){
        this.newError = "新密码必须是三位以上的字母或数字";
      }
      else{this.newError = "";}

      if(this.userObj.newPwd != this.userObj.rePwd){
        this.reError = "两次密码不一致";
      }
      else{this.reError = "";}

      if(this.oldError.length != 0 || this.newError.length != 0
          || this.reError.length !=0){
        return false;
      }

      return true;
    },
    updatePwd(){ //修改密码
      if(this.checkForm() == false){return;}

      axios.get("/project/user/updatePwd",{
        params:{
          id:this.loginUser.id,
          newPwd:this.userObj.newPwd
        }
      }).then(resp =>{
        if(resp.data == "ok"){
          this.$router.push("/login");
        }
      })
    }
  },
  created() {
    var loginInfo = sessionStorage.getItem("loginUser");
    if(loginInfo != null) {
      this.loginUser = JSON.parse(loginInfo);
    }
  }
}
</script>

<style scoped>

</style>